<!DOCTYPE html>
<html lang="en">

<head>
    @@include('meta.html')
    <title>场外交易</title>
</head>
<style>
    body.hidden {
        min-width: 1400px;
        overflow-x: auto
    }
</style>

<body class="hidden">
    @@include('header.html')
    <div class="y-main-content">
        <div class="y-location clearfix">
            <div class="left clearfix">
                <span class="left first-location">场外交易</span>
                <img src="images/icon/next.png" alt="" class="left location-ico">
                <span class="left on-location">购买BITCNY</span>
            </div>
            <div class="right y-explain">
                说明：场外交易是指平台用户与平台承兑商之间的交易，由平台做外担保以及撮合，平台自身不参与任何场外交易行为；
            </div>
        </div>
        <div class="clearfix hidden">
            @@include('club-exchange.html')
            <div class="y-content-r">
                <div class="y-location-r">
                    购买BITCNY
                </div>
                <div class="y-main-content-r">
                    <div class="y-scroll-height">
                        <div class="clearfix y-table-th border-b">
                            <div class="width20p fl text-c clearfix">
                                <div class="inline-b">
                                    <span class="fl y-table-text">承兑商昵称</span>
                                    <div class="fl y-searchCoins">
                                        <input type="text" placeholder="搜索" value="" class="fl y-input y-search-input">
                                        <img src="images/icon/y-search.png" alt="" class="y-searchBar">
                                    </div>
                                </div>
                            </div>
                            <div class="width20p fl text-c y-table-text">
                                <div class="pointer">
                                    限额
                                    <img src="images/icon/tableIco1.png" class="y-sortIcon" alt="">
                                </div>
                            </div>
                            <div class="width20p fl text-c y-table-text">
                                <div class="pointer">
                                    单价
                                    <img src="images/icon/tableIco1.png" class="y-sortIcon" alt="">
                                </div>
                            </div>
                            <div class="width20p fl text-c y-table-text">
                                <div class="y-filterList">
                                    <select class="y-select-box">
                                                <option class="y-option" value="1" selected>支付方式</option>
                                                <option class="y-option" value="2">全部</option>
                                                <option class="y-option" value="3">微信</option>
                                                <option class="y-option" value="4">支付宝</option>
                                                <option class="y-option" value="4">银行卡</option>
                                            </select>
                                    <div class="y-replace y-replace-width">
                                        <span class="y-current current-height">支付方式</span>
                                        <ul class="y-options options-width">
                                            <li rel="1">支付方式</li>
                                            <li rel="2">全部</li>
                                            <li rel="3">微信</li>
                                            <li rel="4">支付宝</li>
                                            <li rel="4">银行卡</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="width20p fl text-c y-table-text">
                                操作
                            </div>
                        </div>

                        <ul class="trade-ul">
                            <li class="clearfix trade-li border-b">
                                <div class="clearfix fl width20p">
                                    <span class="fl y-headerName">炒</span>
                                    <div class="fl ml10">
                                        <p class="y-trade-person">炒币小王子</p>
                                        <p class="y-trade-code">5238</p>
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-cny-text">1000 BINTCNY</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-trade-price">&yen;&nbsp;0.99/个</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <div class="inline-b">
                                        <img src="images/icon/wechat.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/alipay.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/bank.png" class="plr5 mt10" alt="">
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <button class="y-btn y-orange-btn mt15">立刻出售</button>
                                </div>
                                <div class="clearfix trade-buy">
                                    <span class="fl y-buy-headerName">炒</span>
                                    <div class="fl ml10 width35p">
                                        <p class="y-trade-person">
                                            炒币小王子(成交单数：35627)&emsp;&emsp;单价：
                                            <span class="y-price">&yen; 0.99/个</span>
                                        </p>
                                        <p class="y-trade-limitPrice">限额10000 BITCNY</p>
                                        <div class="y-trade-ways">
                                            <span class="y-trade-way">
                                                <img src="images/icon/wechat.png" class="plr5" alt="">
                                                微信
                                            </span>
                                            <span class="y-trade-way">
                                                <img src="images/icon/alipay.png" class="plr5" alt="">
                                                支付宝
                                            </span>
                                            <span class="y-trade-way">
                                                <img src="images/icon/bank.png" class="plr5" alt="">
                                                银行卡
                                            </span>
                                        </div>
                                    </div>
                                    <div class="fr mr20">
                                        <div class="clearfix">
                                            <div class="fl clearfix">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">&yen;</span>
                                                    </div>
                                                    <span class="y-trade-remark">可出售金额：&yen;17825.53</span>
                                                </div>
                                                <img src="images/icon/changeIco.png" class="fl y-trade-chageIco" alt="">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">BITCNY</span>
                                                    </div>
                                                    <span class="y-trade-remark">可出售数量：18053个</span>
                                                </div>
                                            </div>
                                            <div class="fl y-trade-btns">
                                                <button class="y-btn y-orange-btn y-payWayPop-show">下单</button>
                                                <button class="y-btn y-transparent-btn">取消</button>
                                            </div>
                                        </div>
                                        <p class="y-trade-tip">下单后您的出售资产将会被冻结，请在下单后留意资金到账情况并及时处理订单</p>
                                    </div>
                                </div>
                            </li>
                            <li class="clearfix trade-li border-b">
                                <div class="clearfix fl width20p">
                                    <span class="fl y-headerName">奋</span>
                                    <div class="fl ml10">
                                        <p class="y-trade-person">奋斗</p>
                                        <p class="y-trade-code">5238</p>
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-cny-text">1000 BINTCNY</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-trade-price">&yen;&nbsp;0.99/个</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <div class="inline-b">
                                        <img src="images/icon/wechat.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/alipay.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/bank.png" class="plr5 mt10" alt="">
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <button class="y-btn y-orange-btn mt15">立刻出售</button>
                                </div>
                                <div class="clearfix trade-buy none">
                                    <span class="fl y-buy-headerName">奋</span>
                                    <div class="fl ml10 width35p">
                                        <p class="y-trade-person">
                                            奋斗(成交单数：35627)&emsp;&emsp;单价：
                                            <span class="y-price">&yen; 0.99/个</span>
                                        </p>
                                        <p class="y-trade-limitPrice">限额10000 BITCNY</p>
                                        <div class="y-trade-ways">
                                            <span class="y-trade-way">
                                                    <img src="images/icon/wechat.png" class="plr5" alt="">
                                                    微信
                                                </span>
                                            <span class="y-trade-way">
                                                    <img src="images/icon/alipay.png" class="plr5" alt="">
                                                    支付宝
                                                </span>
                                            <span class="y-trade-way">
                                                    <img src="images/icon/bank.png" class="plr5" alt="">
                                                    银行卡
                                                </span>
                                        </div>
                                    </div>
                                    <div class="fr">
                                        <div class="clearfix">
                                            <div class="fl clearfix">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">&yen;</span>
                                                    </div>
                                                    <span class="y-trade-remark">可出售金额：&yen;17825.53</span>
                                                </div>
                                                <img src="images/icon/changeIco.png" class="fl y-trade-chageIco" alt="">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">BITCNY</span>
                                                    </div>
                                                    <span class="y-trade-remark">可出售数量：18053个</span>
                                                </div>
                                            </div>
                                            <div class="fl y-trade-btns">
                                                <button class="y-btn y-orange-btn y-payWayPop-show">下单</button>
                                                <button class="y-btn y-transparent-btn">取消</button>
                                            </div>
                                        </div>
                                        <p class="y-trade-tip">下单后您的出售资产将会被冻结，请在下单后留意资金到账情况并及时处理订单</p>
                                    </div>
                                </div>
                            </li>
                            <li class="clearfix trade-li border-b">
                                <div class="clearfix fl width20p">
                                    <span class="fl y-headerName">L</span>
                                    <div class="fl ml10">
                                        <p class="y-trade-person">Lan</p>
                                        <p class="y-trade-code">5238</p>
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-cny-text">1000 BINTCNY</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <span class="y-trade-price">&yen;&nbsp;0.99/个</span>
                                </div>
                                <div class="fl width20p text-c">
                                    <div class="inline-b">
                                        <img src="images/icon/wechat.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/alipay.png" class="plr5 mt10" alt="">
                                        <img src="images/icon/bank.png" class="plr5 mt10" alt="">
                                    </div>
                                </div>
                                <div class="fl width20p text-c">
                                    <button class="y-btn y-orange-btn mt15">立刻出售</button>
                                </div>
                                <div class="clearfix trade-buy none">
                                    <span class="fl y-buy-headerName">炒</span>
                                    <div class="fl ml10 width35p">
                                        <p class="y-trade-person">
                                            炒币小王子(成交单数：35627)&emsp;&emsp;单价：
                                            <span class="y-price">&yen; 0.99/个</span>
                                        </p>
                                        <p class="y-trade-limitPrice">限额10000 BITCNY</p>
                                        <div class="y-trade-ways">
                                            <span class="y-trade-way">
                                                    <img src="images/icon/wechat.png" class="plr5" alt="">
                                                    微信
                                                </span>
                                            <span class="y-trade-way">
                                                    <img src="images/icon/alipay.png" class="plr5" alt="">
                                                    支付宝
                                                </span>
                                            <span class="y-trade-way">
                                                    <img src="images/icon/bank.png" class="plr5" alt="">
                                                    银行卡
                                                </span>
                                        </div>
                                    </div>
                                    <div class="fr">
                                        <div class="clearfix">
                                            <div class="fl clearfix">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">&yen;</span>
                                                    </div>
                                                    <span class="y-trade-remark">可出售金额：&yen;17825.53</span>
                                                </div>
                                                <img src="images/icon/changeIco.png" class="fl y-trade-chageIco" alt="">
                                                <div class="fl">
                                                    <div class="clearfix y-trade-inputBox">
                                                        <input type="text" class="fl y-input y-trade-input">
                                                        <span class="fr y-trade-inputLabel">BITCNY</span>
                                                    </div>
                                                    <span class="y-trade-remark">可出售数量：18053个</span>
                                                </div>
                                            </div>
                                            <div class="fl y-trade-btns">
                                                <button class="y-btn y-orange-btn y-payWayPop-show">下单</button>
                                                <button class="y-btn y-transparent-btn">取消</button>
                                            </div>
                                        </div>
                                        <p class="y-trade-tip">下单后您的出售资产将会被冻结，请在下单后留意资金到账情况并及时处理订单</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 设置支付方式-->
    <div class="y-popBox y-payWay-pop none">
        <div class="popbg"></div>
        <div class="pop_box">
            <div class="pop_desc">
                您需要先绑定并激活至少一种支付方式才可以出售数字货币资产！
            </div>
            <div class="clearfix pop_button">
                <div class="fl width50p">
                    <button class="y-btn y-lilace-btn y-plain-btn y-md-btn" onclick="bindPayWay()">立即绑定</button>
                </div>
                <div class="fl width50p">
                    <button class="y-btn y-popCancel-btn y-plain-btn y-md-btn">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 选择支付方式-->
    <div class="y-popBox y-selectWay-pop none">
        <div class="popbg"></div>
        <div class="pop_box no-padding">
            <div class="p20 fs24 text-l">
                收款方式：
            </div>
            <div class="y-filterList y-pop-filterList">
                <select class="y-select-box">
                    <option class="y-option" value="1" selected>微信收款</option>
                    <option class="y-option" value="2">支付宝收款</option>
                    <option class="y-option" value="3">银行卡收款</option>
                </select>
                <div class="y-replace y-replace-width">
                    <div class="y-current current-height">
                        <img src="images/icon/wechat.png" class="y-option-ico" alt=""> 微信收款
                    </div>
                    <ul class="y-options options-width">
                        <li rel="1"><img src="images/icon/wechat.png" class="y-option-ico" alt="">微信收款</li>
                        <li rel="2"><img src="images/icon/alipay.png" class="y-option-ico" alt="">支付宝收款</li>
                        <li rel="3"><img src="images/icon/bank.png" class="y-option-ico" alt="">银行卡收款</li>
                    </ul>
                </div>
            </div>
            <div class="clearfix pop_button">
                <button class="y-btn y-lilace-btn y-plain-btn y-lg-btn" onclick="fillPassword()">下一步</button>
            </div>
        </div>
    </div>
    <!-- 填写资金密码 -->
    <div class="y-popBox y-passwordWay-pop none">
        <div class="popbg"></div>
        <div class="pop_box no-padding">
            <div class="p20 fs24 text-l">
                资金密码：
            </div>
            <div class="border-b">
                <div class="y-pop-input-box">
                    <input class="y-input y-pop-input" type="text" placeholder="请填写您的资金密码">
                </div>
            </div>
            <div class="clearfix pop_button">
                <button class="y-btn y-lilace-btn y-plain-btn y-lg-btn" onclick="order()">确定下单</button>
            </div>
        </div>
    </div>
    <!-- 下单 -->
    <div class="y-popBox y-order-pop none">
        <div class="popbg"></div>
        <div class="pop_box no-padding">
            <div class="y-pop-order">
                <div class="y-pop-location clearfix">
                    <span class="fl">付款订单</span>
                    <span class="fr fs18">您已成功下单，请及时付款;</span>
                </div>
                <div class="plr30 ptb10 border-b">
                    <div class="clearfix">
                        <span class="fl fs20">请核对订单信息：</span>
                        <span class="fr fs20">
                                交易总额：
                                <span class="y-price fs24">&yen; 3075.59</span>
                        </span>
                    </div>
                    <div class="clearfix fs18 mt10">
                        <span class="fl">订单类型：购买BITCNY</span>
                        <span class="fl ml60">
                                交易单价：
                                <span class="y-price">&yen; 1.00/个</span>
                        </span>
                        <span class="fr">交易数量：1000</span>
                    </div>
                </div>
                <div class="y-popOrder-pay">
                    <div class="clearfix">
                        <span class="fl">收款方式</span>
                        <div class="fr">
                            <img src="images/icon/wechat.png" class="y-popPay-ico" alt="">
                            <span class="y-pay-text">微信收款</span>
                        </div>
                    </div>
                </div>
                <div class="fs20 plr30 pb20 border-b">
                    <div class="clearfix mt20">
                        <span class="fl">收款人</span>
                        <span class="fr">一只区块链小白</span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">下单时间</span>
                        <span class="fr">2018-07-10  15:52:25</span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">订单号</span>
                        <span class="fr">201807101552257364</span>
                    </div>
                    <div class="clearfix mt20">
                        <span class="fl">
                                备注
                            <span class="y-pop-receiptTips">（请核对收款订单的备注号码）</span>
                        </span>
                        <span class="fr">32196391</span>
                    </div>
                </div>
                <div class="fs18 text-l mt20 plr30">
                    温馨提示：请按要求输入“备注”号码，否则无法到账！如您已向卖家转账付款，请务必点击右下角“我已付款”按钮，否则有可能造成资金损失。
                </div>
            </div>
            <div class="clearfix pop_button">
                <div class="fl">
                    <button class="y-btn y-orderAppeal-btn y-plain-btn y-md-btn" onclick="appeal()">订单异常，我要申诉</button>
                </div>
                <div class="fr text-r">
                    <button class="y-btn y-lilace-btn y-plain-btn y-md-btn" onclick="hasPay()">我已收款，放行BITCNY</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 订单完成 -->
    <div class="y-popBox y-finished-pop none">
        <div class="popbg"></div>
        <div class="pop_box">
            <p class="pop_text">温馨提示！</p>
            <div class="pop_desc">
                <span class="db line15">请确保您已收到正确的订单金额，以免造成资产损失“确认收款”将视为您已收到款项并放行bitcny
                </span>
            </div>
            <div class="clearfix pop_button">
                <div class="fl width50p">
                    <button class="y-btn y-lilace-btn y-plain-btn y-md-btn">确认收款</button>
                </div>
                <div class="fl width50p">
                    <button class="y-btn y-popReturn-btn y-plain-btn y-md-btn" onclick="returnOrder()">返回</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 订单申诉 -->
    <div class="y-popBox y-appeal-pop none">
        <div class="popbg"></div>
        <div class="pop_box no-padding">
            <div class="y-pop-location clearfix">
                <span class="fl">订单申诉</span>
            </div>
            <div class="text-l mt20 pb20 plr30 border-b">
                <div class="mt10 fs20">请核对订单信息</div>
                <div class="mt10 fs18">付款人：一只区块链小白</div>
                <div class="mt10 fs18">
                    交易总额：
                    <span class="y-price fs24">&yen; 3075.59</span>
                </div>
                <div class="mt10 clearfix fs18">
                    <span class="fl">订单类型：购买BITCNY</span>
                    <span class="fl ml60">
                        交易单价：
                        <span class="y-price">&yen; 1.00/个</span>
                    </span>
                    <span class="fr">交易数量：1000</span>
                </div>
            </div>
            <div class="plr30 fs20 text-l">
                <div class="ptb10">申诉原因</div>
                <div class="y-pop-textarea-box">
                    <textarea class="y-input y-pop-textarea" placeholder="请填写您的申诉原因"></textarea>
                </div>
                <div class="pb10 pt20">联系方式</div>
                <div class="y-pop-input-box y-pop-link-input">
                    <input class="y-input y-pop-input" type="text" placeholder="请填写您的联系方式：手机/电话/邮箱">
                </div>
                <div class="mt10 fs18">申诉提交后，24小时内会有专职的承兑客服与您取得联系，请确保您的联络畅通；</div>
            </div>
            <div class="clearfix pop_button">
                <div class="fl width48p">
                    <button class="y-btn y-lilace-btn y-plain-btn y-lg-btn">提交</button>
                </div>
                <div class="fr width48p">
                    <button class="y-btn y-popCancel-btn y-plain-btn y-lg-btn">取消</button>
                </div>
            </div>
        </div>
    </div>
    @@include('footer-js.html')
    <script type="text/javascript">
        // 加载列表头像颜色
        $(document).ready(function() {
            var colorArray = ["#fa6e0a", "#0b987b", "#bf1b34", "#0283bb", "#1a67b7", "#0b987b", "#0283bb"];
            var headerArr = $('.y-headerName');
            $.each(headerArr, function(index, value) {
                $('.y-headerName').eq(index).css("background-color", colorArray[index % 7]);
                $('.y-headerName').eq(index).parent().parent('.trade-li').find(".y-buy-headerName").css("background-color", colorArray[index % 7]);
            });
            // 设置支付方式
            $('.y-payWayPop-show').click(function() {
                $('.y-payWay-pop').removeClass('none');
            })

            // 取消订单
            $('.y-cancelPop-show').click(function() {
                $('.y-cancelOrder-pop').removeClass('none');
            })
        });
        // 支付方式
        function bindPayWay() {
            $('.y-popBox').addClass('none');
            $('.y-selectWay-pop').removeClass('none');
        }
        // 资金密码
        function fillPassword() {
            $('.y-popBox').addClass('none');
            $('.y-passwordWay-pop').removeClass('none');
        }
        // 下单
        function order() {
            $('.y-popBox').addClass('none');
            $('.y-order-pop').removeClass('none');
        }
        // 订单完成
        function hasPay() {
            $('.y-popBox').addClass('none');
            $('.y-finished-pop').removeClass('none');
        }
        // 返回订单
        function returnOrder() {
            $('.y-popBox').addClass('none');
            $('.y-order-pop').removeClass('none');
        }
        // 订单异常
        function appeal() {
            $('.y-popBox').addClass('none');
            $('.y-appeal-pop').removeClass('none');
        }
    </script>
</body>

</html>